<template>
  <div class="energy-common">
    <div class="common-bg-title">历史数据</div>
    <div class="main">
      <div class="title">数据趋势</div>
      <el-row type="flex" class="mb15">
        <el-radio-group
          class="common-radio-border"
          style="margin-right:20px"
          v-model="search.cj"
          size="mini"
          ><el-radio-button label="">全部</el-radio-button>
          <el-radio-button
            v-for="(item, index) in cjOption"
            :key="index"
            :label="item['key_value']"
          ></el-radio-button>
        </el-radio-group>
        <el-radio-group
          class="common-radio-border"
          v-model="search.type"
          size="mini"
          ><el-radio-button label="定量"></el-radio-button>
          <el-radio-button label="车速"></el-radio-button>
          <el-radio-button label="产量"></el-radio-button>
          <el-radio-button label="电能消耗"></el-radio-button>
          <el-radio-button label="吨纱电耗"></el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row type="flex" class="mb15">
        <el-select
          style="width:157px;margin-right:15px"
          class="common-prefix-select"
          v-model="search.gongxu"
          size="mini"
        >
          <template #prefix>工序：</template>
          <el-option
            v-for="item in gxOption"
            :key="item.id"
            :label="item['key_value']"
            :value="item['key_value']"
          />
        </el-select>
        <time-picker @getTime="getTime"></time-picker>
      </el-row>
      <div class="bar-chart">
        <el-radio-group
          class="toggle-chart"
          v-model="type"
          size="mini"
          fill="#2c67f6"
          text-color="#fff"
        >
          <el-radio-button label="bar">
            <svg-icon icon-class="bar" />
          </el-radio-button>
          <el-radio-button label="line"
            ><svg-icon icon-class="line"/></el-radio-button
        ></el-radio-group>
        <div ref="chart1" class="mb10" style="width:100%;height:100%"></div>
      </div>
      <div class="common-table" ref="table">
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="55" align="center">
            <template slot-scope="{ row, column, $index }">
              {{ parseInt($index) + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="cj" label="车间" min-width="10%" />
          <el-table-column prop="gongxu" label="工序" min-width="10%" />
          <el-table-column prop="devSn" label="设备编号" min-width="10%" />
          <el-table-column prop="pz" label="品种" min-width="10%" />
          <el-table-column prop="startTime" label="开始时间" min-width="12%" />
          <el-table-column prop="endTime" label="结束时间" min-width="12%" />
          <el-table-column prop="dl" label="定量" min-width="10%" />
          <el-table-column prop="address" label="车速" min-width="10%" />
          <el-table-column prop="address" label="产量" min-width="10%" />
          <el-table-column prop="address" label="电能消耗" min-width="10%" />
          <el-table-column prop="dsdh" label="吨纱电耗" min-width="10%" />
        </el-table>
      </div>
      <div class="common-pagination">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-size="search.size"
          :current-page.sync="search.current"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import TimePicker from '@/components/TimePicker';
export default {
  components: { TimePicker },
  data() {
    return {
      active: 'first',
      type: 'bar',
      search: {
        cj: '',
        type: '定量',
        gongxu: '细纱',
        startDateTime: '',
        endDateTime: '',
        current: 1,
        size: 10
      },
      total: 10,
      chart1: null,
      loading: false,
      tableData: [],
      tableHeight: 268
    };
  },
  watch: {
    type: function(val) {
      this.setChart(val);
    }
  },
  computed: {
    gxOption() {
      return this.$store.getters.gxOption;
    },
    cjOption() {
      return this.$store.getters.cjOption;
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
    });
    this.$nextTick(() => {
      this.setChart('bar');
    });
  },
  methods: {
    getTableData() {},
    setChart(type) {
      if (this.chart1) {
        this.chart1.clear();
      }
      this.chart1 = this.$echarts.init(this.$refs.chart1);
      let option = {};
      if (type == 'bar') {
        option = {
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 13
            },
            padding: 10,
            backgroundColor: 'rgba(66, 66, 89, 0.8)',
            formatter: function(params) {
              var result =
                '<div style="font-size:14px;font-weight:600;margin-bottom:4px">' +
                params[0].axisValue +
                '</div>';
              result +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                params[0].color +
                '"></span>';
              result += params[0].axisValue + '：' + params[0].data;
              return result;
            }
          },
          legend: {
            show: false
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '30px'
          },
          xAxis: {
            type: 'value',
            name: '定量(吨)',
            nameTextStyle: { color: '#292B3D' },
            axisLine: { show: true, lineStyle: { color: 'rgb(219,225,231)' } },
            axisTick: { show: false },
            axisLabel: { color: '#606D86' },
            splitLine: { show: false }
          },
          yAxis: {
            type: 'category',
            name: '品种名称',
            nameTextStyle: { color: '#292B3D' },
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
            axisTick: { show: false },
            axisLine: { lineStyle: { color: 'rgba(225,231,235)' } },
            axisLabel: { color: '#606D86' }
          },
          series: [
            {
              name: '2011',
              type: 'bar',
              barWidth: 18,
              color: '#5B8FF9',
              data: [18203, 23489, 29034, 104970, 131744, 630230]
            }
          ]
        };
      } else {
        option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left: '5%',
            icon: 'circle',
            itemWidth: 12,
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
          },
          color: ['#4C85FF', '#61DDAA', '#8061EF', '#FFC403', '#F2693E'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: { show: false },
            axisLine: { lineStyle: { color: 'rgba(225,231,235)' } },
            axisLabel: { color: '#606D86' }
          },
          yAxis: [
            {
              type: 'value',
              name: '定量(吨)',
              nameLocation: 'end',
              nameTextStyle: { color: '#292B3D' },
              axisTick: { show: false },
              axisLine: {
                show: true,
                lineStyle: { color: 'rgb(219,225,231)' }
              },
              axisLabel: {
                show: true,
                fontSize: 13,
                textStyle: {
                  color: '#292B3D'
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#EAEBF0',
                  type: 'dotted'
                }
              }
            }
          ],
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: 'Union Ads',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: 'Video Ads',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: 'Direct',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: 'Search Engine',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        };
      }
      this.chart1.setOption(option);
      var _this = this;
      window.addEventListener('resize', function() {
        _this.chart1.resize();
      });
    },
    getTime(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      this.search.current = 1;
      this.search.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.search.current = val;
      this.getTableData();
    }
  }
};
</script>

<style lang="scss">
@import '@/assets/css/energy.scss';
</style>
